<template>
    <div class="personInfo_content">
        <div class="personInfo_header box">
            <h1 class="box">推荐人信息</h1>
            <div class="personInfo_info box" style="margin-bottom: 20px;" v-for="item of list" :key="item.id">
                <div class="fl_img">
                    <img :src="item.avatar" alt="头像">
                    <span class="iconfont">&#xe603;</span>
                </div>
                <div class="rec_menu box">
                    <h2>{{item.nickname}}</h2>
                    <p>用户ID：{{item.id}}</p>
                </div>
                <!-- <div class="zh_state box">
                    {{item.level}}代
                </div> -->
            </div>
            <button class="save_btn" @click="$router.go(-1)">返回</button>
        </div>
    </div>
</template>
<script>
    import { getRecommend } from "@/api/user";

    export default {
        name: 'personInfo',
        data () {
            return {
                list: []
            }
        },
        activated: function () {
            this.getRecommend();
        },
        methods: {
            getRecommend(){
                getRecommend().then(res => {
                    this.list = res.data
                })
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .personInfo_content
        width 100%
        height 100vh
        overflow hidden
        background #f5f5f5
        .personInfo_header
            padding .4rem .3rem
            overflow hidden
            h1
                padding 0 0 .4rem 0
                overflow hidden
                color #000
                font-size .32rem
            .personInfo_info
                padding .4rem .3rem
                overflow hidden
                display flex
                display -webkit-flex
                width 100%
                margin 0 auto
                background #fff9f9
                border-radius .2rem
                position relative
                border 1px solid #b64a23
                .fl_img
                    width 1rem
                    height 1rem
                    margin-right .3rem
                    position relative
                    img
                        width 1rem
                        height 1rem
                        position absolute
                        top 0
                        left 0
                        z-index 1
                        border-radius 50%
                        overflow hidden
                    .iconfont
                        text-align center
                        width .3rem
                        line-height 0.3rem
                        color red
                        background #fff
                        border 1px solid red
                        border-radius 50%
                        position absolute
                        bottom -1rem
                        right 0
                        font-size 0.24rem
                        z-index 11
                .rec_menu
                    flex 1
                    -webkit-flex 1
                    overflow hidden
                    h2
                        width 100%
                        line-height 0.4rem
                        font-size 0.3rem
                        color #000
                        margin-top .1rem
                    p
                        line-height 0.4rem
                        font-size 0.24rem
                        color #9b9b9b
                        margin-top .1rem
                .zh_state
                    position absolute
                    top 0
                    right 0
                    line-height 0.5rem
                    font-size 0.26rem
                    color: #d64532;
                    background #fde2e7
                    padding 0 .2rem
                    border-bottom-left-radius .2rem
        .input_div
            margin-top .3rem
            width 100%
            overflow hidden
            background #fff
            div
                width 100%
                display flex
                display -webkit-flex
                overflow hidden
                height .9rem
                line-height .9rem
                border-bottom 1px solid #eee
                background #ffffff
                padding 0 .3rem
                label
                    width 25%
                    text-align left
                    color #000
                    display inline-block
                    line-height .9rem
                    font-size .3rem
                input
                    flex 1
                    -webkit-flex 1
                    border none
                    text-align right
                    display inline-block
                    line-height .9rem
                    font-size .3rem
                    color #858585
                    background #fff
                    &::-webkit-input-placeholder
                        color #858585
                        font-size .28rem
                        text-align right
                span
                    display inline-block
                    color #858585
                    margin-left  0.1rem
                    font-size .4rem

                .copy
                    line-height .4rem
                    height .4rem
                    margin-top .24rem
                    font-size .26rem
                    padding 0 .2rem
                    color #000
                    border 1px solid #858585
                    background #fff
                .rec_way
                    color #000
        .save_btn
            width 100%
            border: 1px solid #d64532;
            background: #d64532;
            line-height .9rem
            height .9rem
            font-size .32rem
            color #fff
            border-radius .9rem
            display block
            text-align center
            margin .9rem 0 .5rem 0



</style>
